<script setup lang="ts">
import { ref, computed, onMounted,onBeforeMount } from "vue";
import IndexView from "./components/IndexView.vue";
import SearchView from "./components/SearchView.vue";
// import BrowseView from "./components/BrowseView.vue";
import ManageView from "./components/ManageView.vue";
import { UseLibraryState } from "./library_state";
import { FakeSuper } from "./components/user";
import LoginView from "./components/LoginView.vue";
import { ElNotification } from "element-plus";
import RecordView from "./components/RecordView.vue";

onBeforeMount(()=>state.change_fetch())

onMounted(() => {
  // active_pane.value='search'
  // state.user=FakeSuper
  state.change_fetch()
  state.check_login_state()

  // state.active_pane='borrow'
});

const state = UseLibraryState();
const show_login_dialog=ref(false)

const confirm_logout=()=>{
  state.loggedOut()
  ElNotification.info({
    message:'账号登出!',
    title:'Info',
    duration:10000,
  })
}
</script>

<template>
<div class="w-full h-screen grid-row-auto-fr overflow-hidden">
<div class="w-full flex items-center justify-between">
  <h1 class="text-4xl text-gray-200 font-extrabold tracking-widest text-left py-2 pl-4"
  style="text-shadow:2px 2px 2px gray;">在线图书馆</h1>
  <div class="justify-self-end pr-4">
    <el-popconfirm title="确认登出?" v-if="state.is_login" @confirm="confirm_logout()">
    <template #reference>
    <el-tag  size="large" hit>{{state.user.nickName}}</el-tag>
    </template>
  </el-popconfirm>

    <el-button v-else type="primary" round @click="show_login_dialog=true">登录</el-button>
  </div>
</div>
<el-tabs type="border-card" class="w-full" style="height:calc(100vh - 80px)" v-model="state.active_pane">
  <el-tab-pane label="布告" name="index">
    <IndexView></IndexView>
  </el-tab-pane>

  <el-tab-pane label="检索" name="search">
    <SearchView></SearchView>
  </el-tab-pane>
  <el-tab-pane label="借阅" name="borrow" v-if="state.is_reader || state.is_super_manager">
    <RecordView :user="state.is_reader?state.user.id:'super'"></RecordView>
  </el-tab-pane>
  <el-tab-pane label="管理" name="manager" v-if="state.is_manager">
    <ManageView></ManageView>
  </el-tab-pane>
</el-tabs>
</div>
<el-dialog
v-model="show_login_dialog"
>
<LoginView
@cancelled="show_login_dialog=false"
@completed="show_login_dialog=false"
></LoginView>
</el-dialog>
</template>

<style>
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
body{
  @apply bg-gray-100
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height: 100%;
}

.el-tabs__item{
  font-size: 20px;
}

.grid-row-auto-fr{
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
}
.el-tabs__content{
  height: calc(100vh - 200px);
}
.el-tab-pane{
  height: 100%;
}
.el-avatar{
  font-size: 24px;
}
</style>
